<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Brand</title>
</head>
<body>
<div id="app">
    <h2 align="center">${user.username}，欢迎您！</h2>
    <hr>
    <p align="center"><input type="button" value="添加" @click="addBrand()"></p>
    <table border="1" cellspacing="0" width="80%" id="brandTable" align="center">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <!--使用v-for遍历数据行-->
        <tr align="center" v-for="(brand,i) in brands">
            <td>{{i + 1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.statusStr}}</td>
            <td>
                <input type="button" value="修改" @click="updateBrand(brand)">
                <input type="button" value="删除" @click="deleteBrand(brand)">
            </td>
        </tr>
    </table>
</div>
<script src="../js/axios-0.18.0.js"></script><!--导入axios.js-->
<script src="../js/vue.js"></script><!--引入vue.js-->
<script>
    //创建Vue核心对象
    new Vue({
        el: "#app", //指定受管理的标签
        data() { //定义数据模型
            return {
                brands: []
            }
        },
        mounted() {  //定义页面加载完成函数，发送ajax请求
            //提升this的作用域 --> _this --> this --> Vue对象
            let _this = this;
            axios.get("http://localhost:8080/cookiesession_case/selectAllServletJson")
                .then((response) => {
                    _this.brands = response.data;
                });
        },
        methods: {
            addBrand() {    //添加
                location.href = "addBrand.html";
            },
            deleteBrand(brand) {    //删除
                if (confirm("确认删除？")) {
                    location.href = "/cookiesession_case/deleteServletJson?id=" + brand.id;
                    alert("删除成功！")
                }
            },
            updateBrand(brand) {    //修改
                location.href = "/cookiesession_case/html/update.html?id=" + brand.id;
            }
        }
    });
</script>
<!--<script>

    /*给添加按钮绑定点击事件*/
    document.getElementById("add").onclick = function () {
        /*跳转到添加页面*/
        location.href = "addBrand.html";
    };
    //绑定页面加载完毕事件
    window.onload = function () {
        //发送ajax请求
        axios.get("http://localhost:8080/cookiesession_case/selectAllServletJson")
            .then((response) => {
                //处理响应数据
                //接收数据
                let brands = response.data;
                //定义表头
                let tableData = "<tr height='40px'>\n" +
                    "        <th>序号</th>\n" +
                    "        <th>品牌名称</th>\n" +
                    "        <th>企业名称</th>\n" +
                    "        <th>排序</th>\n" +
                    "        <th>品牌介绍</th>\n" +
                    "        <th>状态</th>\n" +
                    "        <th>操作</th>\n" +
                    "    </tr>";
                //定义单元格
                console.log(brands);
                for (let i = 0; i < brands.length; i++) {
                    let brand = brands[i];
                    let status = '启用';
                    if (brand.status == 0) {
                        status = '禁用';
                    }
                    tableData += "<tr align='center' height='50px'>\n" +
                        "        <td>" + (i + 1) + "</td>\n" +
                        "        <td>" + brand.brandName + "</td>\n" +
                        "        <td>" + brand.companyName + "</td>\n" +
                        "        <td>" + brand.ordered + "</td>\n" +
                        "        <td>" + brand.description + "</td>\n" +
                        "        <td>" + status + "</td>\n" +
                        "\n" +
                        "        <td><a href='/cookiesession_case/html/update.html?id=" + brand.id + "'>修改</a>" +
                        "           <a href='/cookiesession_case/deleteServletJson?id=" + brand.id + "'>删除</a></td>\n" +
                        "    </tr>";
                }
                //填充表格
                document.getElementById("brandTable").innerHTML = tableData;
            })
    };
</script>-->
</body>
</html>